<template>
  <div class="index">
    <p class="title">
      <span>用户组织：{{this.$store.state.agent}}</span>
      <span>组织负责人：{{this.$store.state.agenter}}</span>
      <span>电话：{{this.$store.state.phone}}</span>
    </p>
    <ul class="screen">
      <li>
        <div>
          <p>风险等级</p>
          <b>{{risklevel}}</b>
        </div>
      </li>
      <li>
        <div>
          <p>体温异常 </p>
          <b>{{temperature}}</b>
        </div>
      </li>
      <li>
        <div>
          <p>确认病例 </p>
          <b>{{confirmrisk}}</b>
        </div>
      </li>
      <li>
        <div>
          <p>核酸检测 </p>
          <b>{{testper}}</b>
        </div>
      </li>
    </ul>
    <div class="area comtab" v-show='nomenu'>
      <span class="gap">地区</span>
      <ul>
        <li @click="changearea(v,k)" :class="k == areakey ? 'picked' : '' " v-for="(v, k) in arealist" :key='k'>
          <button type="button">{{v.name}}
          </button>
        </li>
      </ul>
    </div>
    <div class="school comtab" v-show='nomenu'>
      <span>学校等级</span>
      <ul>
        <li @click="changeschool(v,k)" :class="k == schoolkey ? 'picked' : '' " v-for="(v, k) in schoolist" :key='k'>
          <button type="button">{{v.name}}
          </button>
        </li>
      </ul>
    </div>
    <div class="person comtab" :class="ranklevel == 5 ? 'hide' : '' ">
      <span class="gap">人员</span>
      <ul>
        <li @click="changeper(v,k)" :class="k == perkey ? 'picked' : '' " v-for="(v, k) in perlist" :key='k'>
          <button type="button">{{v.name}}
          </button>
        </li>
      </ul>
    </div>
    <div class="situation">
      <span>测温统计</span>
      <ul>
       <li v-for="(v,i) in temlist" :key='i' @click='detailstext()'>
          <b>{{v.count}}</b>
          <p><i :class="v.risklevel == 'g' ? 'col1' : v.risklevel == 'y' ? 'col2' : v.risklevel == 'b' ? 'col3' : v.risklevel == 'o' ? 'col4' : v.risklevel == 'r' ? 'col5' : '' "></i>{{v.text}}
          </p>
        </li>
      </ul>
    </div>
    <div class="situation">
      <span>隔离统计</span>
      <ul>
        <li v-for="(v,i) in gaplist" :key='i' @click='detailstext()'>
          <b>{{v.count}}</b>
          <p><i :class="v.risklevel == 'g' ? 'col1' : v.risklevel == 'y' ? 'col2' : v.risklevel == 'b' ? 'col3' : v.risklevel == 'o' ? 'col4' : v.risklevel == 'r' ? 'col5' : '' "></i>{{v.text}}
          </p>
        </li>
      </ul>
    </div>
    <div class="situation" v-show='nomenu'>
      <span>停复课统计</span>
      <ul>
        <li v-for="(v,i) in stoplist" :key='i' @click='detailstext()'>
          <b>{{v.count}}</b>
          <p><i :class="v.risklevel == 'g' ? 'col1' : v.risklevel == 'y' ? 'col2' : v.risklevel == 'b' ? 'col3' : v.risklevel == 'o' ? 'col4' : v.risklevel == 'r' ? 'col5' : '' "></i>{{v.text}}
          </p>
        </li>
      </ul>
    </div>
    <div class="situation">
      <span class="spespan">确诊和其他统计</span>
      <ul>
        <li v-for="(v,i) in confirmlist" :key='i' @click='detailstext()'>
          <b>{{v.count}}</b>
          <p><i :class="v.risklevel == 'g' ? 'col1' : v.risklevel == 'y' ? 'col2' : v.risklevel == 'b' ? 'col3' : v.risklevel == 'o' ? 'col4' : v.risklevel == 'r' ? 'col5' : '' "></i>{{v.text}}
          </p>
        </li>
      </ul>
    </div>
    <div class="trend">
      <h2>趋势分析</h2>
      <div class="timebox">
        <ul>
          <li>时间</li>
          <li @click='changeday(v,i)' :class="i == timekey ? 'actived' : '' " v-for="(v,i) in timelist" :key='i'>
            <button type="button">{{v.name}}</button>
          </li>
        </ul>
        <i class="el-input__icon el-icon-date timeicon"></i>
        <!-- <el-date-picker class="picktime"
        format="yyyy 年 MM 月 dd 日"
        value-format="yyyy-MM-dd"
        @change="picktrendate"
        v-model="trendtime"
        type="date" placeholder="选择日期">
        </el-date-picker> -->

        <el-date-picker class="picktime" v-model="trendtime" type="daterange" @change="picktrendate" format="yyyy-MM-dd"
          value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']">
        </el-date-picker>

      </div>
      <ul class="statistics">
        <li>统计项</li>
        <li @click='changepro(v,i)' :class="i == prokey ? 'picks' : '' " v-for="(v,i) in prolist" :key='i'>
          <button type="button">{{v.name}}</button>
        </li>
      </ul>
    </div>
    <div v-show="provinceFlag || cityFlag" class="region">

      <div v-show="emptyflag" id="leftChartempty" :style="{width: '640px', height: '340px', backgroundColor:'#000418', float: 'left'}">
        无数据
      </div>
      <div v-show="!emptyflag" id="leftChart" :style="{width: '640px', height: '340px', backgroundColor:'#000418', float: 'left'}"></div>
      <div id="rightChart" :style="{width: '460px', height: '340px', backgroundColor:'#000418', float: 'right'}"></div>
      <span @click="detilsen" class="detail">详情 ></span>
    </div>

    <div v-show="!provinceFlag && !cityFlag" class="region" style="margin-top: 20px;">
      <div id="singleChart" :style="{width: '1100px', height: '340px', backgroundColor:'#000418', float: 'left'}"></div>
    </div>


    <div v-if="provinceFlag || cityFlag" class="curentcity">
      <h2>地区概况</h2>
      <ProvinceChart v-if="currentProvinceCityName && currentProvinceShowId && provinceChartAllData.length != 0"
        :cityProvinceChartName="cityProvinceChartName" :provinceChartAllData="provinceChartAllData" />
    </div>


    <div v-show="provinceFlag || cityFlag" class="citybox">
      <h2>城市概况</h2>
      <div v-show="provinceFlag || cityFlag" class="cabin">
        <table>
          <thead>
            <tr>
              <th>城市</th>
              <th v-for="(v,i) in headlist" :key='i'>{{v}}</th>
              <!-- <th v-show='operateflag'>操作</th> -->
            </tr>
          </thead>
          <tbody>
            <tr v-for="(v,i) in datalist" :key='i'>
              <td><i :class="v.sta == 0 ? 't1' : v.sta == 1 ? 't2' : v.sta == 2 ? 't3' : v.sta == 3 ? 't4' : ''"></i>{{ v.name }}</td>
              <td v-for="(val,key) in v.data" :key='key'>{{ val.count }}</td>
              <!-- <td>{{ v.n2 }}</td>
              <td>{{ v.n3 }}</td>
              <td>{{ v.n4 }}</td>
              <td>{{ v.n5 }}</td>
              <td>{{ v.n6 }}</td>
              <td>{{ v.n7 }}</td>
              <td>{{ v.n8 }}</td> -->
              <td v-show='operateflag' class="detail" @click="todetailsprovince(v)">详情 ></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <div id="schoolbox">
      <ul v-show="schoolFlag">
        <li @click="changesch(i,v)" :class="schooltabflag == i ? 'schoolpicked' : ''" v-for="(v,i) in schooltab" :key="i">{{v}}</li>
        <li class="addvistor" @click="addFangKeDetail">添加访客</li>
      </ul>
      <!-- 班级的搜索 -->
      <div v-show="schoolFlag && schooltabflag == 0 " class="menu">
        <span>班级</span>
        <el-input class="inp" v-model="inpclass" placeholder=""></el-input>
        <span class="studysta">学情</span>
        <el-select class="haveclasssta" v-model="haveclasssta" @change='changeclass' placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-button type="primary" class="search" @click="searchdataclass"><i class="el-icon-search"></i> 搜索</el-button>
        <span class="exports" @click='exportlist1'>导出</span>
      </div>
      <!-- 职工的搜索 -->
      <div v-show="schoolFlag && schooltabflag == 1 " class="menu">
        <span>名字</span>
        <el-input class="inp" v-model="inpworker" placeholder=""></el-input>
        <span class="studysta">状态</span>
        <el-select class="haveclasssta" v-model="haveworkersta" @change='changeworker' placeholder="请选择">
          <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-button type="primary" class="search" @click="searchdataworker"><i class="el-icon-search"></i> 搜索</el-button>
        <span class="exports" @click='exportlist2'>导出</span>
      </div>
      <!-- 访客的搜索 -->
      <div v-show="schoolFlag && schooltabflag == 2 " class="menu">
        <span>名字</span>
        <el-input class="inp" v-model="inpvistor" placeholder=""></el-input>
        <span class="studysta">状态</span>
        <el-select class="haveclasssta" v-model="havevistorsta" @change="changevistor" placeholder="请选择">
          <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-button type="primary" class="search" @click="searchdatavistor"><i class="el-icon-search"></i> 搜索</el-button>
        <span class="exports" @click='exportlist3'>导出</span>
      </div>
      <div v-show="schoolFlag" class="cabin">
        <!-- 班级 -->
        <table :class="schooltabflag != 0 ? 'hide' : '' ">
          <thead>
            <tr>
              <th v-for="(v,i) in gradeheadlist" :key='i'>{{v}}</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(v,i) in gradedatalist" :key='i'>
              <!-- <td><i :class="v.sta == 0 ? 't1' : v.sta == 1 ? 't2' : v.sta == 2 ? 't3' : v.sta == 3 ? 't4' : ''"></i>{{ v.name }}</td> -->
              <!-- <td><i :class="v.sta == 0 ? 't1' : v.sta == 1 ? 't2' : v.sta == 2 ? 't3' : v.sta == 3 ? 't4' : ''"></i>{{ v.classname }}</td> -->
              <!-- <td v-for="(val,key) in v.data" :key='key'>{{ val.count }}</td> -->
              <!-- <td>{{ v.n1 }}</td>-->
              <td>{{ v.classname }}</td>
              <td>{{ v.study }}</td>
              <td>{{ v.wence }}</td>
              <td>{{ v.tiwenyichang }}</td>
              <td>{{ v.jujia }}</td>
              <td>{{ v.yiliao }}</td>
              <td>{{ v.fanxiao }}</td>
              <td>{{ v.yujing }}</td>
              <td class="detail" @click="todetailsclass(v)">详情 ></td>
            </tr>
            <tr v-show='gradedatalist.length == 0'>
              <td colspan="11" style="text-align: center;border-right: none;">无数据</td>
            </tr>
          </tbody>
        </table>


        <!-- 职工 -->
        <table :class="schooltabflag != 1 ? 'hide' : '' ">
          <thead>
            <tr>
              <th v-for="(v,i) in headlistworker" :key='i'>{{v}}</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(v,i) in datalistworker" :key='i'>
              <!-- <td><i :class="v.sta == 0 ? 't1' : v.sta == 1 ? 't2' : v.sta == 2 ? 't3' : v.sta == 3 ? 't4' : ''"></i>{{ v.name }}</td> -->
              <td><i class="'t1"></i>{{ v.personId }}</td>
              <td>{{ v.name }}</td>
              <td>{{ v.department }}</td>
              <td>{{ v.phone }}</td>
              <td>{{ v.tp }}</td>
              <td>{{ v.createtime }}</td>
              <td>{{ v.address }}</td>
              <td>{{ v.healthstatus }}</td>
              <!-- <td>{{ v.nucleic }}</td> -->
              <td class="detail" @click="todetails(v)">详情 ></td>
            </tr>
            <tr v-show='datalistworker.length == 0'>
              <td colspan="9" style="text-align: center;border-right: none;">无数据</td>
            </tr>
          </tbody>
        </table>

        <!-- 访客 -->
        <table :class="schooltabflag != 2 ? 'hide' : '' ">
          <thead>
            <tr>
              <th v-for="(v,i) in headlistvistor" :key='i'>{{v}}</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(v,i) in datalistvistor" :key='i'>
              <!-- <td><i :class="v.sta == 0 ? 't1' : v.sta == 1 ? 't2' : v.sta == 2 ? 't3' : v.sta == 3 ? 't4' : ''"></i>{{ v.name }}</td> -->
              <td><i class="'t1"></i>{{ v.personId }}</td>
              <td>{{ v.name }}</td>
              <td>{{ v.phone }}</td>
              <td>{{ v.tp }}</td>
              <td>{{ v.createtime }}</td>
              <td>{{ v.address }}</td>
              <td>{{ v.healthstatus }}</td>
             <!-- <td>{{ v.healthcode }}</td>
              <td>{{ v.nucleic }}</td> -->
              <td class="detail" @click="todetails(v)">详情 ></td>
            </tr>
            <tr v-show='datalistvistor.length == 0'>
              <td colspan="8" style="text-align: center;border-right: none;">无数据</td>
            </tr>
          </tbody>
        </table>
      </div>
      <el-pagination v-show='schooltabflag == 0' :current-page.sync="pagecurrent1" @current-change="handleSizeChange1" background layout="prev, pager, next"
        :total="pagetotal1"></el-pagination>
      <el-pagination v-show='schooltabflag == 1' :current-page.sync="pagecurrent3" @current-change="handleSizeChange3" background layout="prev, pager, next"
          :total="pagetotal3"></el-pagination>
      <el-pagination v-show='schooltabflag == 2' :current-page.sync="pagecurrent4" @current-change="handleSizeChange4" background layout="prev, pager, next"
            :total="pagetotal4"></el-pagination>

      <h3 v-show="schoolFlag" class="vicetit">卡点信息</h3>
      <div v-show="schoolFlag" class="menu">
        <span>卡点名称</span>
        <el-input class="inp" v-model="inpcard" placeholder=""></el-input>
        <el-button type="primary" class="search" @click="searchdatacard"><i class="el-icon-search"></i> 搜索</el-button>
        <span class="exports" @click='exportcard'>导出</span>
      </div>
      <div v-show="schoolFlag" class="cabin">
        <table>
          <thead>
            <tr>
              <th v-for="(v,i) in cardheadlist" :key='i'>{{v}}</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(v,i) in carddatalist" :key='i'>
              <!-- <td><i :class="v.sta == 0 ? 't1' : v.sta == 1 ? 't2' : v.sta == 2 ? 't3' : v.sta == 3 ? 't4' : ''"></i>{{ v.name }}</td> -->
              <!-- <td v-for="(val,key) in v.data" :key='key'>{{ val.count }}</td> -->
              <!-- <td><i :class="v.sta == 0 ? 't1' : v.sta == 1 ? 't2' : v.sta == 2 ? 't3' : v.sta == 3 ? 't4' : ''"></i>{{ v.name }}</td> -->
              <td>{{ v.stuckid }}</td>
              <td>{{ v.stuckname }}</td>
              <td>{{ v.stuckposition }}</td>
              <td>{{ v.staffing }}</td>
              <td>{{ v.contact }}</td>
              <td>{{ v.phone }}</td>
              <td>{{ v.deploy }}</td>
              <td>{{ v.jiance }}</td>
              <td>{{ v.tiwenyichang }}</td>
              <td class="detail" @click="todetailscard(v)">详情 ></td>
            </tr>
          </tbody>
        </table>
        <p v-show='carddatalist.length == 0' class="emptydata">无数据</p>
      </div>
      <el-pagination v-show='schoolFlag' :current-page.sync="pagecurrent5" @current-change="handleSizeChange5" background layout="prev, pager, next"
            :total="pagetotal5"></el-pagination>

      <h3 v-show="schoolFlag" class="vicetit">消杀信息</h3>
      <div v-show="schoolFlag" class="menu">
        <span>场所名称</span>
        <el-input class="inp" v-model="inparea" placeholder=""></el-input>
        <el-button type="primary" class="search" @click="searchdatadis"><i class="el-icon-search"></i> 搜索</el-button>
        <span class="exports" @click="exportsdisinfo">导出</span>
      </div>
      <div v-show="schoolFlag" class="cabin">
        <table v-show='forbiddatalist.length != 0'>
          <thead>
            <tr>
              <th v-for="(v,i) in forbidheadlist" :key='i'>{{v}}</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(v,i) in forbiddatalist" :key='i'>
              <!-- <td><i :class="v.sta == 0 ? 't1' : v.sta == 1 ? 't2' : v.sta == 2 ? 't3' : v.sta == 3 ? 't4' : ''"></i>{{ v.name }}</td> -->
              <!-- <td v-for="(val,key) in v.data" :key='key'>{{ val.count }}</td> -->
              <!-- <td><i :class="v.sta == 0 ? 't1' : v.sta == 1 ? 't2' : v.sta == 2 ? 't3' : v.sta == 3 ? 't4' : ''"></i>{{ v.name }}</td> -->
              <td>{{ v.placeid }}</td>
              <td>{{ v.placename }}</td>
              <td>{{ v.placeseat }}</td>
              <td>{{ v.createtime }}</td>
              <td>{{ v.contact }}</td>
              <td class="detail" @click="todetailsdisinfect(v)">详情 ></td>
            </tr>
          </tbody>
        </table>
        <p v-show='forbiddatalist.length == 0' class="emptydata">无数据</p>
      </div>

      <h3 v-show="gradeFlag" class="vicetit">学生概况</h3>
      <div v-show="gradeFlag" class="menu">
        <span>名字</span>
        <el-input class="inp" v-model="studentName" placeholder=""></el-input>
        <span class="studysta">状态</span>
        <el-select class="haveclasssta" v-model="studentsta" @change='picksta' placeholder="请选择">
          <el-option v-for="item in studentoptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-button type="primary" class="search" @click="searchdata"><i class="el-icon-search"></i> 搜索</el-button>
        <span class="exports" @click='exportlist4'>导出</span>
      </div>
      <div v-show="gradeFlag" class="cabin">
        <table>
          <thead>
            <tr>
              <th v-for="(v,i) in studentheadlist" :key='i'>{{v}}</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(v,i) in studentdatalist" :key='i'>
              <!-- <td><i :class="v.sta == 0 ? 't1' : v.sta == 1 ? 't2' : v.sta == 2 ? 't3' : v.sta == 3 ? 't4' : ''"></i>{{ v.name }}</td> -->
              <!-- <td v-for="(val,key) in v.data" :key='key'>{{ val.count }}</td> -->
              <!-- <td><i :class="v.sta == 0 ? 't1' : v.sta == 1 ? 't2' : v.sta == 2 ? 't3' : v.sta == 3 ? 't4' : ''"></i>{{ v.name }}</td>-->
              <td>{{ v.personId }}</td>
              <td>{{ v.name }}</td>
              <td>{{ v.sex | sexfilter }}</td>
              <td>{{ v.tp }}</td>
              <td>{{ v.createtime }}</td>
              <td>{{ v.schoolname }}</td>
              <td>{{ v.healthstatus }}</td>
              <td>{{ v.healthcode }}</td>
              <td class="detail" @click="todetails(v)">详情 ></td>
            </tr>
          </tbody>
        </table>
        <p class='emptydata' v-show='studentdatalist.length == 0'>无数据</p>
      </div>
      <el-pagination :current-page.sync="pagecurrent2" @current-change="handleSizeChange2" background layout="prev, pager, next"
        :total="pagetotal2"></el-pagination>
    </div>
  </div>
</template>

<script>
import ProvinceChart from './ProvinceChart';

export default {
  name: 'HelloWorld',
  data() {
    return {
      // map start
      showMapComponent: this.value,
      keyword: '',
      mapStyle: {
        width: '100%',
        height: this.mapHeight + 'px'
      },
      center: {
        lng: 116.404,
        lat: 39.915
      },
      zoom: 15,
      passprovince: '广东',
      // map end
      studentName: '',
      pagecurrent1: 1,
      pagecurrent2: 1,
      pagecurrent3: 1,
      pagecurrent4: 1,
      pagecurrent5: 1,
      pagetotal1: 10,
      pagetotal2: 10,
      pagetotal3: 10,
      pagetotal4: 10,
      pagetotal5: 10,
      curcard: 1,
      study: '',
      nomenu: true,
      operateflag: false,
      passdata: [],
      emptyflag: false,
      pietitle: '2020-06-24',
      countryFlag: false,
      provinceFlag: false,
      cityFlag: false,
      schoolFlag: false,
      gradeFlag: false,
      trendlist: {
        n1: 0,
        n2: 0,
        n3: 0,
        n4: 0,
        n5: 0,
        n6: 0,
        n7: 0
      },
      ranklevel: '',
      trendtime: '',
      agent: '',
      agenter: '',
      phone: '',
      risklevel: '',
      temperature: '',
      confirmrisk: '',
      statisticstype: '1',
      isdate: '1',
      testper: 400,
      temrate: '0.16%',
      riskrate: '-1.84%',
      testrate: '-7.49%',
      areakey: 0,
      timekey: 0,
      schoolkey: 0,
      prokey: 0,
      perkey: 0,
      schooltabflag: 0,
      haveclasssta: '',
      haveworkersta: '',
      havevistorsta: '',
      inpclass: '',
      inpworker: '',
      inpvistor: '',
      inpcard: '',
      inparea: '',
      studentsta: '',
      datalistworker: [],
      datalistvistor: [],
      headlistworker: ['职工ID', '名字', '部门', '联系方式', '最新温测', '温测时间', '地点', '当前状态', '详情'],
      headlistvistor: ['访客ID', '名字', '联系方式', '最新温测', '温测时间', '地点', '当前状态', '操作'],
      schooltab: ['班级概况', '职工概况', '访客概况'],
      headlist: ['风险等级', '今日测温', '今日体温异常', '当前疑似', '当前确诊', '当前居家隔离', '当前医疗隔离', '累计康复人数', '详情'],
      gradeheadlist: ['班级', '学情', '温测', '体温异常', '居家隔离人数', '医疗隔离', '返校隔离', '预警', '操作'],
      cardheadlist: ['卡点ID', '卡点名称', '卡点位置', '人员配置', '负责人', '联系电话', '设备配置', '检测人数', '体温异常', '操作'],
      forbidheadlist: ['场所ID', '场所名称', '场所位置', '最新消杀时间', '负责人联系人'],
      studentheadlist: ['学生ID', '名字', '性别', '最新温测', '测温时间', '地点', '当前状态', '学情预警', '操作'],
      options: [{
        value: '1',
        label: '正常'
      }, {
        value: '2',
        label: '停课'
      }],
      options2: [{
        value: '0',
        label: '正常'
      }, {
        value: '2',
        label: '留校观察'
      }, {
        value: '17',
        label: '医疗交接'
      }, {
        value: '7',
        label: '居家隔离'
      }, {
        value: '5',
        label: '医疗隔离'
      }, {
        value: '18',
        label: '复工申请'
      }, {
        value: '11',
        label: '返校复课'
      }, {
        value: '6',
        label: '返校复工'
      }, {
        value: '14',
        label: '疑似患者'
      }],
      options3: [{
        value: '2',
        label: '禁止入校'
      }, {
        value: '1',
        label: '允许入校'
      }],
      studentoptions: [{
        value: '0',
        label: '正常'
      },
      {
        value: '2',
        label: '留校观察'
      },
      {
        value: '17',
        label: '医疗交接'
      },
      {
        value: '7',
        label: '居家隔离'
      },
      {
        value: '5',
        label: '医疗隔离'
      },
      {
        value: '18',
        label: '复课申请'
      },
      {
        value: '11',
        label: '返校复课'
      },
      {
        value: '14',
        label: '疑似患者'
      },
      {
        value: '6',
        label: '返校复工'
      }
      ],
      datalist: [],
      gradedatalist: [],
      carddatalist: [],
      forbiddatalist: [{
        name: '001',
        n1: '三年一班',
        n2: '东校区西侧',
        n3: '2020-06-12',
        n4: '14:45',
        n5: '马晓晓',
        n6: '1231231231',
        sta: 0
      },
      {
        name: '001',
        n1: '三年一班',
        n2: '东校区西侧',
        n3: '2020-06-12',
        n4: '14:45',
        n5: '马晓晓',
        n6: '1231231231',
        sta: 1
      },
      {
        name: '001',
        n1: '三年一班',
        n2: '东校区西侧',
        n3: '2020-06-12',
        n4: '14:45',
        n5: '马晓晓',
        n6: '1231231231',
        sta: 2
      },
      {
        name: '001',
        n1: '三年一班',
        n2: '东校区西侧',
        n3: '2020-06-12',
        n4: '14:45',
        n5: '马晓晓',
        n6: '1231231231',
        sta: 3
      },
      ],
      studentdatalist: [],
      arealist: [],
      schoolist: [{
        name: '全部',
        code: ''
      },
      {
        name: '幼儿园',
        code: '1'
      },
      {
        name: '小学',
        code: '2'
      },
      {
        name: '初中',
        code: '3'
      },
      {
        name: '高中',
        code: '4'
      },
      {
        name: '职高',
        code: '5'
      },
      {
        name: '中专',
        code: '6'
      },
      {
        name: '大学',
        code: '7'
      },
      ],
      perlist: [{
        name: '全部',
        code: ''
      },
      {
        name: '学生',
        code: '1'
      },
      {
        name: '职工学',
        code: '2'
      },
      {
        name: '访客',
        code: '3'
      },
      ],
      timelist: [{
        name: '今天',
        code: '1'
      },
      {
        name: '7天',
        code: '7'
      },
      {
        name: '14天',
        code: '14'
      },
      {
        name: '30天',
        code: '30'
      }
      ],
      prolist: [{
        name: '测温',
        code: '1'
      },
      {
        name: '体温异常',
        code: '2'
      },
      {
        name: '停课班级',
        code: '8'
      },
      {
        name: '留校观察',
        code: '3'
      },
      {
        name: '居家隔离',
        code: '7'
      },
      {
        name: '医疗隔离',
        code: '5'
      },
      {
        name: '返校复课',
        code: '11'
      }
      ],
      temlist: [],
      gaplist: [],
      stoplist: [{
        name: '日停课班级',
        num: 28,
        sta: 2
      },
      {
        name: '日复课班级',
        num: 100,
        sta: 3
      },
      {
        name: '当前停课班级',
        num: 58,
        sta: 1
      },
      {
        name: '当日增返校复课人数',
        num: 33,
        sta: 0
      }
      ],
      confirmlist: [{
        name: '日确诊人数',
        num: 66,
        sta: 3
      },
      {
        name: '今日核酸检测人数',
        num: 190,
        sta: 0
      },
      {
        name: '累计确诊人数',
        num: 10,
        sta: 1
      },
      {
        name: '今日场所消杀次数',
        num: 100,
        sta: 2
      }
      ],
      cityProvinceChartName: '', // 选择的城市名
      provinceno: '',
      schoolno: '',
      cityno: '',
      schoolLevel: '',
      personType: '',
      classno: '',
      begintime: '',
      endtime: '',
      istoday: '1',
      currentime: '',
      chartx1: ['0点', '6点', '12点', '18点', '24点'],
      charty1: [2, 3, 4, 5, 6],
      pagecurrent: 1,
      pagesize: 10,
      echart1: ['广州', '深圳', '珠海', '潮汕', '汕头', '东莞', '惠州', '其他'],
      echart2: [{
        value: 32,
        name: '广州'
      },
        // {
        //   value: 21,
        //   name: '深圳'
        // },
        // {
        //   value: 48,
        //   name: '珠海'
        // },
        // {
        //   value: 1,
        //   name: '潮汕'
        // },
        // {
        //   value: 42,
        //   name: '汕头'
        // },
        // {
        //   value: 17,
        //   name: '东莞'
        // },
        // {
        //   value: 135,
        //   name: '惠州'
        // },
        // {
        //   value: 21,
        //   name: '其他'
        // }
      ],
      provinceChartAllData: [], // 传递给地区概况组件的数据
      currentProvinceCityName: '', // 传递给地区组件的数据
      currentProvinceShowId: null, // 传递给地区的地图ID
      countyno: '',
      schoolname: '',
      passuserid: ''
    }
  },
  components: {
    ProvinceChart
  },
  filters: {
    sexfilter(v) {
      var sta = '';
      if (v == 0) {
        sta = '女'
      } else {
        sta = '男'
      }
      return sta
    }
  },
  created() {
    this.getUserInfo();
    var mydate = new Date();
    var year = mydate.getFullYear();
    var month = mydate.getMonth() + 1;
    var date = mydate.getDate();
    var isdate = year + '-' + month + '-' + date;
    this.currentime = isdate;
  },
  mounted() {
    this.drawLine2();
    this.drawLine4();
    // this.add()
  },
  methods: {
    todetailsclass(v) {
      var item = JSON.stringify(v)
      this.$router.push({ path: '/classdetail', query: { text: item } })
    },
    changevistor(v) {
      this.havevistorsta = v;
      console.log(this.havevistorsta)
    },
    changeclass(v) {
      this.haveclasssta = v;
      console.log(this.haveclasssta);
    },
    changeworker(v) {
      this.haveworkersta = v;
      console.log(this.haveworkersta)
    },
    picksta(v) {
      console.log(v);
      this.personType = v
    },
    handleSizeChange2(v) {
      this.pagecurrent2 = v;
      if (this.schoolFlag) {
        this.getdisinfo()
      }
      // this.getStudentdetail();

    },
    handleSizeChange1(v) {

    },
    handleSizeChange3(v) {

    },
    handleSizeChange4(v) {

    },
    handleSizeChange5(v) {
      this.curcard = v;
      this.getcardinfo()
    },
    detailstext() {
      this.$router.push({
        path: '/monitoring',
        query: {
          text: ''
        }
      })
    },
    // 城市概况
    getCityList() {
      // this.headlist = [];
      // this.gradeheadlist = [];
      // this.cardheadlist = [];
      // this.studentheadlist = [];
      this.datalist = [];
      this.echart1 = [];
      this.echart2 = [];
      this.passdata = [];
      // this.gradedatalist = [];
      // this.carddatalist = [];
      // this.studentheadlist = [];
      // this.$http('health/healthInfoStatistics/getBranchs', {
      //   "ranklevel": this.ranklevel,
      //   "provinceno": this.provinceno,
      //   "schoolno": this.schoolno,
      //   "cityno": this.cityno,
      //   "istoday": '',
      //   "statisticstype": '',
      //   "pagecurrent": this.pagecurrent,
      //   "pagesize": this.pagesize
      // }).then(res => {
      //   console.log(res);
      //   this.headlist = [];
      //   this.datalist = [];
      //   if (res.code == 200) {
      //     res.data[0].data.forEach(v => {
      //       this.headlist.push(v.branchName)
      //     });
      //     res.data.forEach((item,i) => {
      //       item.sta = i;
      //       this.datalist.push(item)
      //     })
      //   }
      // })

      // this.$http('health/healthInfoStatistics/getPageBranchs', {
      this.$http('health/healthInfoStatistics/getBranchs', {

        "ranklevel": this.ranklevel,
        "provinceno": this.provinceno,
        "schoolno": this.schoolno,
        "cityno": this.cityno, // 目前先写死 440000 为广东
        "classno": this.classno,
        "istoday": '',
        "statisticstype": '',
        "pagecurrent": this.pagecurrent,
        "pagesize": this.pagesize
      }).then(res => {
        if (res.code == 200) {
          console.log(res)
          // this.cityProvinceChartName = '河北省'
          // this.cityProvinceChartName = res.data[0].name
          // 传递给地图的数据
          this.provinceChartAllData = res.data;
          this.datalist = res.data;

          // this.provinceChartAllData = res.data.records;

          // mine
          // res.data.records[0].data.forEach(v => {
          // res.data[0].data.forEach(v => {
          // this.headlist.push(v.branchName);
          // this.gradeheadlist.push(v.branchName);
          // this.cardheadlist.push(v.branchName);
          // this.forbidheadlist.push(v.branchName);
          // this.studentheadlist.push(v.branchName)
          // });

          // res.data.records.forEach(val => {
          res.data.forEach(val => {
            var obj = {};
            obj.name = val.name;
            obj.value = 2;
            this.echart1.push(val.name);
            this.echart2.push(obj);

            // this.$store.state.passdata.push(val)

            val.sta = 0;
            // this.datalist.push(val);
            // this.gradedatalist.push(val);
            // this.carddatalist.push(val);
            // this.forbiddatalist.push(val);
            // this.studentheadlist.push(val);

          })
          console.log(this.$store.state.passdata)
          this.drawLine2()
        }
      })
    },
    // 搜索
    searchdata() {
      console.log(1)
      this.getStudentdetail()
    },
    // 搜索 班级
    searchdataclass() {
      this.getclass()
    },
    searchdataworker() {
      this.getworker()
    },
    searchdatavistor() {
      this.getvistor()
    },
    // 搜索卡点
    searchdatacard() {
      this.getcardinfo()
    },
    // 搜索消杀
    searchdatadis() {
      this.getdisinfo()
    },
    // 导出卡点信息
    exportcard() {
      // this.$http('/stuck/batchexport', {
      //   "schoolname": this.inpcard,
      // }).then(res => {
      //   console.log(res)
      // })
      location.href = 'http://wcxt.bjyulinkeji.com/stuck/batchexport? schoolname=' + this.schoolname
    },
    // 消杀信息导出
    exportsdisinfo() {
      location.href = 'http://wcxt.bjyulinkeji.com/disinfect/batchexport?schoolno=' + this.schoolno
    },
    //班级导出
    exportlist1() {
      var userid = this.passuserid;
      location.href = 'http://wcxt.bjyulinkeji.com/personnel/dataexport?userid=' + userid + '&userType=1'
    },
    //职工导出
    exportlist2() {
      var userid = this.passuserid;
      location.href = 'http://wcxt.bjyulinkeji.com/personnel/dataexport?userid=' + userid + '&userType=2'
    },
    //访客导出
    exportlist3() {
      var userid = this.passuserid;
      location.href = 'http://wcxt.bjyulinkeji.com/personnel/dataexport?userid=' + userid + '&userType=3'
    },
    //学生导出
    exportlist4() {
      var userid = this.passuserid;
      location.href = 'http://wcxt.bjyulinkeji.com/personnel/dataexport?userid=' + userid + '&userType=1'
    },
    // 用户信息
    getUserInfo() {
      this.$http('/user/loginindex', {}).then(
        res => {
          console.log(res)
          if (res.code == 200) {
            var obj = {
              code: '',
              name: '全部'
            };
            this.$store.commit('changeagent', res.data.user.organizationname);
            this.$store.commit('changeagenter', res.data.user.collegename);
            this.$store.commit('changeuser', res.data.user.username);
            this.$store.commit('changephone', res.data.user.phone);
            this.$store.commit('changerole', res.data.roleid);
            this.$store.commit('changeposition', res.data.user.position);

            this.provinceno = res.data.user.provinceid;
            this.cityno = res.data.user.cityid; // 北京市需要改成110000，目前是110100
            this.passuserid = res.data.user.userid;
            if (res.data.adress != '') {
              this.arealist = res.data.adress;
              this.arealist.splice(0, 0, obj);
            }
            if (this.cityno == 110100) {
              this.cityno = 110000;
            }
            // roleid 根据这个来判断一下，这个是1001属于国家级，1002属于省，1003属于市 ，1004属于区（暂时不会存在区用户），1005学校级，1006属于班级级别
            this.currentProvinceShowId = res.data.roleid == 1001 || res.data.roleid == 1002 ? this.provinceno :
              this.cityno;

            this.currentProvinceCityName = res.data.user.cityname;
            switch (res.data.roleid) {
              case 1001:
                this.operateflag = true;
                this.provinceFlag = true;
                break;
              case 1002:
                this.operateflag = true;
                this.provinceFlag = true;
                break;
              case 1003:
                this.cityFlag = true;
                break;
              case 1005:
                this.schoolFlag = true;
                this.nomenu = false;
                break;
              case 1006:
                this.gradeFlag = true;
                this.nomenu = false;
                break;
            }
            if (res.data.levelinfo) {
              this.schoolno = res.data.levelinfo.schoolno
            }
            if (res.data.classinfo) {
              this.classno = res.data.classinfo.classno;
              this.schoolname = res.data.classinfo.schoolname
            }
            console.log(this.$store.state.role)
            switch (res.data.roleid) {
              case 1001:
                this.ranklevel = '1';
                break;
              case 1002:
                this.ranklevel = '2';
                break;
              case 1003:
                this.ranklevel = '3';
                break;
              case 1004:
                this.ranklevel = '';
                break;
              case 1005:
                this.nomenu = false;
                this.ranklevel = '4';
                break;
              case 1006:
                this.nomenu = false;
                this.ranklevel = '5';
                break;
            };
            this.getStatistics();
            this.getTrends();
            this.getCityList();
            if (this.cityFlag) {
              this.getschool()
            }
            if (this.schoolFlag) {
              this.getclass();
              this.getcardinfo();
              this.getdisinfo()
            }
            if (this.ranklevel == '5') {
              this.$http('/health/healthInfoStatistics/getClassInfos', {
                "ranklevel": "5",
                "cityno": this.cityno,
              }).then(res => {
                console.log(res);
                if (res.code == 200) {
                  // this.temlist = [];
                  // this.gaplist = [];
                  // this.confirmlist = [];
                  // res.data[0].data.forEach(v => {
                  //   if (v.branchName == '日测温' || v.branchName == '日测温异常' || v.branchName == '日疑似人数' || v.branchName ==
                  //     '日康复人数') {
                  //     var obj = {};
                  //     obj.risklevel = res.data[0].risklevel;
                  //     obj.count = v.count;
                  //     obj.text = v.branchName
                  //     this.temlist.push(obj)
                  //   }
                  //   if (v.branchName == '今日确诊' || v.branchName == '日医疗隔离' || v.branchName == '日居家隔离' || v.branchName ==
                  //     '日核酸检测') {
                  //     var obj = {};
                  //     obj.risklevel = res.data[0].risklevel;
                  //     obj.count = v.count;
                  //     obj.text = v.branchName
                  //     this.gaplist.push(obj)
                  //   }
                  //   if (v.branchName == '今日确诊' || v.branchName == '确诊人数' || v.branchName == '班级总人数' || v.branchName ==
                  //     '日核酸检测') {
                  //     var obj = {};
                  //     obj.risklevel = res.data[0].risklevel;
                  //     obj.count = v.count;
                  //     obj.text = v.branchName
                  //     this.confirmlist.push(obj)
                  //   }
                  // })
                }
              });
              // 学生概况
              this.getStudentdetail()
            }
          }
        }
      )
    },
    // 学生概况
    getStudentdetail() {
      this.$http('/health/healthInfoStatistics/getPersonHealthsPage', {
        "name": this.studentName,
        // "ranklevel": "4",
        // "pagesize": "2",
        // "pagecurrent": this.pagecurrent,
        // "schoolno": "722627",

        "ranklevel": "5",
        "classno": this.classno,
        "personType": this.personType,
        "pagecurrent": this.pagecurrent,
        "pagesize": this.pagesize,
        "schoolno": this.schoolno
      }).then(res => {
        console.log(res)
        if (res.code == 200) {
          this.studentdatalist = res.data.records;
          this.pagetotal2 = res.data.pages * 10;
          console.log(this.studentdatalist)
        }
      })
    },
    // 获取学校
    getschool() {
      this.headlist = [];
      this.$http('/health/healthInfoStatistics/getBranchsSchool', {
        "ranklevel": "3",
        "cityno": this.cityno,
      }).then(res => {
        console.log(res);
        if (res.code = 200) {
          res.data[0].data.forEach(val => {
            this.headlist.push(val.branchName)
          })
          this.datalist = res.data
        }
      })
    },
    // 获取班级
    getclass() {
      this.$http('/health/healthInfoStatistics/getClassInfos', {
        "classname": this.inpclass,
        "study": this.haveclasssta,
        "ranklevel": "4",
        "cityno": this.cityno,
        "classno": this.classno,
        "schoolno": this.schoolno
      }).then(res => {
        console.log(res);
        if (res.code == 200) {
          // res.data[0].data.forEach(val => {
          // this.gradeheadlist.push(val.branchName)
          // })
          this.gradedatalist = res.data
        }
      })
    },
    // 卡点信息
    getcardinfo() {
      this.$http('/stuck/fuzzyquery/page', {
        "pagesize": 5,
        "pagecurrent": this.curcard,
        "stuckname": this.inpcard, // #卡点名称
        "contact": "" // #负责人
      }).then(res => {
        console.log(res);
        if (res.code == 200) {
          this.carddatalist = res.data.stuck.records;
          this.pagetotal5 = res.data.stuck.pages * 10;
        }
      })
    },
    // 消杀信息
    getdisinfo() {
      this.$http('/disinfect/getmanage', {
        "personincharge": '',
        "starttime": '',
        "endtime": '',
        "organizaitonname": this.inparea,
        "pagecurrent": this.pagecurrent2,
        "pagesize": 5
      }).then(res => {
        console.log(res);
        if (res.code == 200) {
          this.forbiddatalist = res.data.tplace.records;
          this.pagetotal2 = res.data.tplace.pages * 10;
        }
      })
    },

    // 首页豆腐块
    getStatistics() {
      this.$http('/health/healthInfoStatistics/getStatistics', {
        "countyno": this.countyno,
        "ranklevel": this.ranklevel,
        "provinceno": this.provinceno,
        "schoolno": this.schoolno,
        "cityno": this.cityno,
        "istoday": '',
        "statisticstype": '',
        "schoolLevel": this.schoolLevel,
        "personType": this.personType
      }).then(
        res => {
          console.log(res);
          if (res.code == 200) {
            this.temlist = [];
            this.gaplist = [];
            this.stoplist = [];
            this.confirmlist = [];
            this.risklevel = res.data[0].risklevel;
            if (this.ranklevel == '5') {
              res.data[0].data.forEach(val => {
                // alert(val.branchName)
                switch (val.branchName) {
                  case '日测温':
                    var obj = {};
                    obj.count = val.count;
                    obj.text = val.branchName;
                    this.temlist.push(obj)
                    this.temperature = val.count
                    break;
                  case '日测温异常':
                    var obj = {};
                    obj.count = val.count;
                    obj.text = val.branchName;
                    this.temlist.push(obj)
                    break;
                  case '日疑似人数':
                    var obj = {};
                    obj.count = val.count;
                    obj.text = val.branchName;
                    this.temlist.push(obj)
                    break;
                  case '今日确诊':
                    var obj = {};
                    obj.count = val.count;
                    obj.text = val.branchName;
                    this.temlist.push(obj)
                    break;
                  // 隔离
                  case '日居家隔离':
                    var obj = {};
                    obj.count = val.count;
                    obj.text = val.branchName;
                    this.gaplist.push(obj)
                    break;
                  case '日医疗隔离':
                    var obj = {};
                    obj.count = val.count;
                    obj.text = val.branchName;
                    this.gaplist.push(obj)
                    break;
                  case '日康复人数':
                    var obj = {};
                    obj.count = val.count;
                    obj.text = val.branchName;
                    this.gaplist.push(obj)
                    break;
                  case '确诊人数':
                    var obj = {};
                    obj.count = val.count;
                    obj.text = val.branchName;
                    this.gaplist.push(obj)
                    break;
                  // 确诊
                  case '居家隔离':
                    var obj = {};
                    obj.count = val.count;
                    obj.text = val.branchName;
                    this.confirmlist.push(obj)
                    break;
                  case '日核酸检测':
                    var obj = {};
                    obj.count = val.count;
                    obj.text = val.branchName;
                    this.confirmlist.push(obj)
                    break;
                  case '班级总人数':
                    var obj = {};
                    obj.count = val.count;
                    obj.text = val.branchName;
                    this.confirmlist.push(obj)
                    break;
                  case '医疗隔离':
                    var obj = {};
                    obj.count = val.count;
                    obj.text = val.branchName;
                    this.confirmlist.push(obj)
                    break;
                }
              })
              console.log(this.temlist)
            }
            // 四大块
            res.data.forEach(v => {
              switch (v.text) {
                case '测温异常人数':
                  this.temperature = v.count;
                  break;
                case '今日确诊':
                  this.confirmrisk = v.count;
                  break;
                case '日核酸检测':
                  this.testper = v.count;
                  break;
              }
            });
            // 十六块
            // this.temlist = [];
            // this.gaplist = [];
            // this.stoplist = [];
            // this.confirmlist = [];
            // res.data.forEach((item,index) => {
            //   switch (item.risklevel) {
            //     case 'y':
            //       v.sta = 0;
            //       this.temlist.push(v);
            //       break;
            //   }
            // });

            res.data.forEach((v, i) => {
              switch (v.text) {
                //测温统计
                case '日测温':
                  v.sta = i;
                  this.temlist.push(v);
                  break;
                case '日测温异常':
                  v.sta = i;
                  this.temlist.push(v);
                  break;
                case '日疑似人数':
                  v.sta = i;
                  this.temlist.push(v);
                  break;
                case '日康复人数':
                  v.sta = i;
                  this.temlist.push(v);
                  break;
                //隔离统计
                case '日医疗隔离':
                  v.sta = i;
                  this.gaplist.push(v);
                  break;
                case '日居家隔离':
                  v.sta = i;
                  this.gaplist.push(v);
                  break;
                case '医疗隔离':
                  v.sta = i;
                  this.gaplist.push(v);
                  break;
                case '居家隔离':
                  v.sta = i;
                  this.gaplist.push(v);
                  break;
                // 停复课统计
                case '日停课班级':
                  v.sta = i;
                  this.stoplist.push(v);
                  break;
                case '日复课班级':
                  v.sta = i;
                  this.stoplist.push(v);
                  break;
                case '停课班级':
                  v.sta = i;
                  this.stoplist.push(v);
                  break;
                case '日返校复课人数':
                  v.sta = i;
                  this.stoplist.push(v);
                  break;
                // 确诊和其他统计
                case '今日确诊':
                  v.sta = i;
                  this.confirmlist.push(v);
                  break;
                case '日核酸检测':
                  v.sta = i;
                  this.confirmlist.push(v);
                  break;
                case '确诊人数':
                  v.sta = i;
                  this.confirmlist.push(v);
                  break;
                case '日消杀次数':
                  v.sta = i;
                  this.confirmlist.push(v);
                  break;
              }
            });
            console.log(this.temlist)
          }
        }
      )
    },
    // 趋势图
    getTrends() {
      this.chartx1 = [];
      this.charty1 = [];
      this.$http('/health/healthInfoStatistics/getTrends', {
        "isdate": this.isdate,
        "provinceno": this.provinceno,
        "schoolno": this.schoolno,
        "cityno": this.cityno,
        "istoday": this.istoday,
        "statisticstype": this.statisticstype,
        "classno": "",
        "begintime": this.begintime,
        "endtime": this.endtime,
      }).then(
        res => {
          console.log(res);
          if (res.code == 200) {
            if (res.data.length > 0) {
              res.data.forEach(v => {
                this.chartx1.push(v.unitime);
                this.charty1.push(v.count);
              });
              this.emptyflag = false;
              this.drawLine();
            } else {
              // this.$message.error('该条件下无数据,请重新选择');
              this.emptyflag = true
              // this.drawLine();
            }

          }
        }
      )
    },
    // 更改趋势图的 日期
    picktrendate() {
      console.log(this.trendtime)
      if (this.trendtime != '') {
        if (this.trendtime[0] == this.currentime && this.trendtime[1] == this.currentime) {
          this.istoday = '1';
        } else {
          this.istoday = '0';
        }
        this.isdate = 0;
        this.begintime = this.trendtime[0];
        this.endtime = this.trendtime[1];
        this.getTrends()
      }
    },
    add() {
      // 创建地图实例
      var map = new BMap.Map("addd");
      //设置地图的中心点如合肥的坐标
      var point = new BMap.Point(117.17, 31.52);
      // 初始化地图，设置中心点坐标和地图级别
      map.centerAndZoom(point, 8);
      // 允许滚轮缩放
      map.enableScrollWheelZoom();
      //只显示某个省份的关键代码
      var cityName = '安徽省';
      //添加缩略地图控件
      map.addControl(new BMap.OverviewMapControl());
      map.addControl(new BMap.NavigationControl({
        type: BMAP_NAVIGATION_CONTROL_LARGE,
        anchor: BMAP_ANCHOR_TOP_LEFT,
        offset: new BMap.Size(900, 500)
      }));
      var bdary = new BMap.Boundary();
      bdary.get(cityName, function (rs) { //获取行政区域       
        var EN_JW = "180, 90;"; //东北角
        var NW_JW = "-180,  90;"; //西北角
        var WS_JW = "-180, -90;"; //西南角
        var SE_JW = "180, -90;"; //东南角
        //4.添加环形遮罩层
        var ply1 = new BMap.Polygon(rs.boundaries[0] + SE_JW + SE_JW + WS_JW + NW_JW + EN_JW + SE_JW, {
          strokeColor: "none",
          fillColor: "#fefb9c",
          fillOpacity: 1,
          strokeOpacity: 0.5
        }); //建立多边形覆盖物
        map.addOverlay(ply1);
      });
    },
    changearea(v, k) {
      this.areakey = k;
      // 保存选择城市的名称
      this.cityProvinceChartName = v.name;
      this.countyno = v.code;
      this.getStatistics();
    },
    changeschool(v, k) {
      this.schoolkey = k;
      console.log(v);
      this.schoolLevel = v.code;
      this.getStatistics();
    },
    changeper(v, k) {
      this.perkey = k;
      console.log(v);
      this.personType = v.code;
      this.getStatistics();
    },
    changeday(v, i) {
      this.timekey = i;
      console.log(v);
      if (v.code == 1) {
        this.istoday = '1';
      } else {
        this.istoday = '0';
      }
      this.trendtime = '';

      this.isdate = v.code;
      this.getTrends()
    },
    changepro(v, i) {
      this.prokey = i;
      this.statisticstype = v.code;
      this.getTrends()
    },
    detilsen() {
      console.log(3)
    },
    todetailsprovince(v) {
      this.$router.push({
        path: '/city',
        query: {
          text: JSON.stringify(v)
        }
      })
      // this.cityno = v.branchCode;
      // this.ranklevel = '2';
      // this.provinceno = v.branchCode;

    },
    todetailsdisinfect(v) {
      var item = JSON.stringify(v)
      this.$router.push({ path: '/disindectdetail', query: { text: item } })
    },
    todetailscard(v) {
      console.log(v)
      var item = JSON.stringify(v)
      this.$router.push({ path: '/cardDetail', query: { text: item } })
    },
    todetails(v) {
      console.log(v)
      this.$router.push('/monitorDetails')
    },
    // 职工概况
    getworker() {
      this.$http('/health/healthInfoStatistics/getPersonHealths', {
        "ranklevel": this.ranklevel,
        "provinceno": this.provinceno,
        "schoolno": this.schoolno, // this.schoolno,
        "personType": '2',
        "cityno": this.cityno,
        "istoday": "",
        "statisticstype": this.haveworkersta,
        "personType": '2',
        "studentname": this.inpworker,
        "schoolname": this.inpschool,
        "schoolLevel": this.schoolLevel,
        "healthCode": this.healthycode,
        "pagecurrent": this.pagecurrent,
        "pagesize": this.pagesize
      }).then(res => {
        console.log(res)
        if (res.code == 200) {
          this.datalistworker = res.data;
        }
      })
    },
    // 访客概况
    getvistor() {
      this.$http('/health/healthInfoStatistics/getPersonHealths', {
        // "ranklevel": this.ranklevel,
        // "schoolno": this.schoolno, // this.schoolno,
        // "pagecurrent": this.pagecurrent,
        // "pagesize": this.pagesize,

        // "provinceno": this.provinceno,
        // "cityno": this.cityno,
        // "istoday": "",
        // "statisticstype": this.statisticstype,
        // "personType": '3',
        // "studentname": this.inpname,
        // "schoolname": this.inpschool,
        // "schoolLevel": this.schoolLevel,
        // "healthCode": this.healthycode,

        "studentname": this.inpvistor,
        "personType": '3',
        "personstate": this.havevistorsta,
        "ranklevel": this.ranklevel,
        "pagesize": this.pagesize,
        "pagecurrent": this.pagecurrent,
        "schoolno": this.schoolno
      }).then(res => {
        console.log(res)
        if (res.code == 200) {
          this.datalistvistor = res.data;
        }
      })
    },
    changesch(i, v) {
      this.schooltabflag = i;
      console.log(i);
      if (i == 1) { // 职工
        this.datalistworker = [];
        this.getworker()
      } else if (i == 2) { // 访客
        this.datalistvistor = [];
        this.getvistor()
      }
    },
    drawLine4() {
      let that = this;
      let myChart = this.$echarts.init(document.getElementById('singleChart'));
      myChart.setOption({
        title: {
          text: ''
        },
        // tooltip: {
        //     trigger: 'axis',
        //     axisPointer: {
        //         type: 'cross',
        //         label: {
        //             backgroundColor: 'blue'
        //         }
        //     }
        // },
        // legend: {
        //     data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
        // },
        tooltip: {
          // trigger: 'item', //标签
          trigger: 'axis', //标签
          // backgroundColor: '#000',
          color: 'red',
          axisPointer: {
            // type: 'cross',
            // label: {
            //     backgroundColor: 'blue'
            // }
            crossStyle: {
              backgroundColor: 'red'
            }
          },
          formatter: function (params) {
            console.log(params);
            // 可有自定义表格、html样式等；
            var str = '测温人数：' + that.trendlist.n1 + '<br/>' + '测温异常人数：' + that.trendlist.n2 + '<br/>' + '疑似人数：' +
              that.trendlist.n3 +
              '<br/>' + '确诊人数：' + that.trendlist.n4 + '<br/>' + '居家隔离：' + that.trendlist.n5 + '<br/>' + '医疗隔离：' +
              that.trendlist.n6 + '<br/>' + '康复人数：' + that.trendlist.n7;
            return str;
          }
        },
        // toolbox: {
        //     feature: {
        //         saveAsImage: {}
        //     }
        // },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          data: ['0点', '6点', '12点', '18点', '24点'],
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff'
            }
          },
        }],
        yAxis: [{
          type: 'value',
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff'
            }
          },
          //设置网格线颜色
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#333'],
              width: 1,
              type: 'solid'
            }
          }
        }],
        series: [{
          name: '邮件营销',
          type: 'line',
          stack: '总量',
          areaStyle: {},
          itemStyle: {
            normal: {
              areaStyle: {
                type: 'default',
                color: '#090f42',
              },
              lineStyle: { //线的颜色
                color: '#2c39ec'
              },
              //以及在折线图每个日期点顶端显示数字
              label: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#fff'
                }
              }
            },
          },
          data: [23, 32, 101, 134, 90]
        },]
      });
    },
    drawLine() {
      let that = this;
      let myChart = this.$echarts.init(document.getElementById('leftChart'));
      myChart.setOption({
        title: {
          text: ''
        },
        // tooltip: {
        //     trigger: 'axis',
        //     axisPointer: {
        //         type: 'cross',
        //         label: {
        //             backgroundColor: 'blue'
        //         }
        //     }
        // },
        // legend: {
        //     data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
        // },
        tooltip: {
          // trigger: 'item', //标签
          trigger: 'axis', //标签
          // backgroundColor: '#000',
          color: 'red',
          axisPointer: {
            // type: 'cross',
            // label: {
            //     backgroundColor: 'blue'
            // }
            crossStyle: {
              backgroundColor: 'red'
            }
          },
          formatter: function (params) {
            // console.log(params);
            // 可有自定义表格、html样式等；
            var str = '测温人数：' + params[0].value + '<br/>' + '测温异常人数：' + that.trendlist.n2 + '<br/>' + '疑似人数：' +
              that.trendlist.n3 +
              '<br/>' + '确诊人数：' + that.trendlist.n4 + '<br/>' + '居家隔离：' + that.trendlist.n5 + '<br/>' + '医疗隔离：' +
              that.trendlist.n6 + '<br/>' + '康复人数：' + that.trendlist.n7;
            return str;
          }
        },
        // toolbox: {
        //     feature: {
        //         saveAsImage: {}
        //     }
        // },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          // data: ['0点', '6点', '12点', '18点', '24点'],
          data: that.chartx1,
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff'
            }
          },
        }],
        yAxis: [{
          type: 'value',
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff'
            }
          },
          //设置网格线颜色
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#333'],
              width: 1,
              type: 'solid'
            }
          }
        }],
        series: [{
          name: '时刻',
          type: 'line',
          stack: '总量',
          areaStyle: {},
          itemStyle: {
            normal: {
              areaStyle: {
                type: 'default',
                color: '#090f42',
              },
              lineStyle: { //线的颜色
                color: '#2c39ec'
              },
              //以及在折线图每个日期点顶端显示数字
              label: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#fff'
                }
              }
            },
          },
          // data: [23, 32, 101, 134, 90],
          data: that.charty1
        },]
      });
    },
    drawLine2() {
      let that = this;
      let myChart = this.$echarts.init(document.getElementById('rightChart'));
      // 绘制图表
      myChart.setOption({
        title: {
          text: that.pietitle,
          textAlign: 'left',
          padding: 30,
          textStyle: {
            "fontSize": 24,
            "fontWeight": "normal",
            "color": "white"
          }
        },
        // grid: {
        //   left: '0%',
        //   right: '4%',
        //   bottom: '3%',
        //   // containLabel: true
        // },
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} ({d}%)',
          // formatter: '{a} <br/>{b}: {c} ({d}%)',
        },
        legend: {
          orient: 'vertical',
          right: 10,
          padding: 20,
          data: that.echart1,
          icon: "circle",
          textStyle: {
            fontSize: 14,
            color: '#B6B9BE',
            rich: {
              b: {
                color: 'red'
              }
            },
          },
          formatter: function (name) {
            var datas = that.echart2;
            var index = 0;
            datas.forEach(function (v, i) {
              if (v.name == name) {
                index = i;
              }
            });
            return name + ": " + datas[index].value;
          }
        },
        series: [{
          name: '访问来源',
          type: 'pie',
          radius: ['30%', '50%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '30',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: that.echart2
        }]
      });
    },
    drawLine3() {
      let that = this;
      let myChart = this.$echarts.init(document.getElementById('addd'));
      // 绘制图表
      myChart.setOption({
        title: {
          text: that.pietitle,
          textAlign: 'left',
          padding: 30,
          textStyle: {
            "fontSize": 24,
            "fontWeight": "normal",
            "color": "white"
          }
        },
        // grid: {
        //   left: '0%',
        //   right: '4%',
        //   bottom: '3%',
        //   // containLabel: true
        // },
        // tooltip: {
        //   trigger: 'item',
        //   formatter: '{b}: {c} ({d}%)',
        //   // formatter: '{a} <br/>{b}: {c} ({d}%)',
        //
        // },
        // legend: {
        //   orient: 'vertical',
        //   right: 10,
        //   padding: 20,
        //   data: ['广州', '深圳', '珠海', '潮汕', '汕头', '东莞', '惠州', '其他'],
        //   textStyle: {
        //     fontSize: 14,
        //     color: '#B6B9BE',
        //     // rich:{
        //     //   b:{color:'red'}
        //     // },
        //   }
        // },
        // series: [
        //   {
        //     name: '访问来源',
        //     type: 'pie',
        //     radius: ['30%', '50%'],
        //     avoidLabelOverlap: false,
        //     label: {
        //       show: false,
        //       position: 'center'
        //     },
        //     emphasis: {
        //       label: {
        //         show: true,
        //         fontSize: '30',
        //         fontWeight: 'bold'
        //       }
        //     },
        //     labelLine: {
        //       show: false
        //     },
        //     data: [
        //       {value: 32, name: '广州'},
        //       {value: 21, name: '深圳'},
        //       {value: 48, name: '珠海'},
        //       {value: 1, name: '潮汕'},
        //       {value: 42, name: '汕头'},
        //       {value: 17, name: '东莞'},
        //       {value: 135, name: '惠州'},
        //       {value: 21, name: '其他'}
        //     ]
        //   }
        // ]
      });
    },
    addFangKeDetail() {
      this.$router.push({
        path: '/monitorDetails',
        query: {
          personId: "",
          type: 3
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .el-pagination {
	margin: 30px 0;
}

/deep/ .el-pagination.is-background .btn-next,
/deep/ .el-pagination.is-background .btn-prev,
/deep/ .el-pagination.is-background .el-pager li {
	background-color: #090f42;
	color: #fff;
	border: 1px solid #1a2497;
}

/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
	background-color: #1520be;
	border-color: #1520be;
}
.addvistor {
	float: right;
	a {
		color: #252fc7;
		&:hover {
			color: white;
		}
	}
}

.hide {
	display: none !important;
}

.emptydata {
	font-size: 14px;
	color: white;
	text-align: center;
	line-height: 44px;
}

.index {
	#leftChartempty {
		font-size: 24px;
		color: #37c3f8;
		text-align: center;
		line-height: 340px;
	}

	.title {
		font-size: 14px;
		color: white;

		span {
			margin-right: 30px;
		}
	}

	// 四个大屏
	.screen {
		width: 100%;
		display: flex;
		margin: 30px 0;
		justify-content: space-between;

		li {
			display: inline-block;
			width: 256px;
			height: 192px;
			background-color: white;

			div {
				padding-left: 70px;
				margin-top: 20px;
				padding-right: 35px;

				p {
					font-size: 14px;
					color: #fff;
					line-height: 30px;

					span {
						float: right;
						font-size: 12px;

						&.tems {
							color: #2ba301;
						}

						&.risks {
							color: #ff1812;
						}
					}
				}

				b {
					font-size: 24px;
					color: #fff;
				}
			}

			&:nth-child(1) {
				background-color: #000418;
				background-image: url(../assets/images/t1.png);
				background-repeat: no-repeat;
				background-position: 50% 72px;
				background-size: 346px;

				div {
					background: url(../assets/images/risk.png) no-repeat 20px center;
					background-size: 30px;
				}
			}

			&:nth-child(2) {
				background-color: #000418;
				background-image: url(../assets/images/t2.png);
				background-repeat: no-repeat;
				background-position: 50% 72px;
				background-size: 346px;

				div {
					background: url(../assets/images/temperature.png) no-repeat 20px
						center;
					background-size: 30px;
				}
			}

			&:nth-child(3) {
				background-color: #000418;
				background-image: url(../assets/images/t3.png);
				background-repeat: no-repeat;
				background-position: 50% 26px;
				background-size: 346px;

				div {
					background: url(../assets/images/case.png) no-repeat 20px center;
					background-size: 30px;
				}
			}

			&:nth-child(4) {
				background-color: #000418;
				background-image: url(../assets/images/t4.png);
				background-repeat: no-repeat;
				background-position: 50% 80px;
				background-size: 350px;

				div {
					background: url(../assets/images/test.png) no-repeat 20px center;
					background-size: 30px;
				}
			}
		}
	}

	// 地区 tab
	.comtab {
		overflow: hidden;
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-bottom: 12px;

		span {
			width: 110px;
			font-size: 14px;
			color: white;
			line-height: 36px;

			&.gap {
				letter-spacing: 1em;
			}
		}

		ul {
			width: 100%;

			li {
				display: inline-block;
				margin-right: 25px;

				&.picked {
					button {
						color: #00c8f1;
					}
				}

				button {
					cursor: pointer;
					border: none;
					background: transparent;
					font-size: 14px;
					color: white;
					line-height: 36px;

					&:focus {
						outline: none;
					}

					&:hover {
						color: #00c8f1;
					}
				}
			}
		}
	}

	// 地区 tab 对应的数据
	.situation {
		display: flex;
		justify-content: space-between;
		background-color: #000418;
		padding: 20px;
		box-sizing: border-box;
		margin-bottom: 15px;

		span {
			width: 16px;
			font-size: 14px;
			color: white;
			-webkit-writing-mode: vertical-rl;
			writing-mode: vertical-rl;
			border: 1px solid #192b7c;
			background-color: #0b1233;
			border-radius: 4px;
			padding: 16px 8px;
			text-align: center;
			letter-spacing: 4px;

			&.spespan {
				font-size: 12px;
				padding: 6px 8px;
			}
		}

		ul {
			justify-content: space-between;
			width: 94%;
			display: flex;

			li {
				width: 226px;
				height: 128px;
				border-left: 1px solid #454b66;
				border-right: 1px solid #454b66;
				border-top: 1px solid #101944;
				border-bottom: 1px solid #101944;
				border-radius: 6px;

				&:hover {
					border: 1px solid white;
					cursor: pointer;

					b {
						color: #3440de;
					}

					p {
						color: #5862e4;

						i {
							background-color: #444ecf !important;
						}
					}
				}

				b {
					display: block;
					font-size: 30px;
					color: white;
					text-align: center;
					line-height: 80px;
					background-color: #000418;
					border-radius: 6px;
				}

				p {
					background-color: #0b1026;
					font-size: 14px;
					color: white;
					text-align: center;
					line-height: 46px;
					border-top: 1px solid #101944;
					border-radius: 6px;

					i {
						display: inline-block;
						width: 8px;
						height: 8px;
						border-radius: 50%;
						margin-right: 8px;
					}

					.col1 {
						background-color: green;
					}

					.col2 {
						background-color: yellow;
					}

					.col3 {
						background-color: blue;
					}

					.col4 {
						background-color: orange;
					}

					.col5 {
						background-color: red;
					}
				}
			}
		}
	}

	//趋势分析
	.trend {
		h2 {
			font-size: 18px;
			color: white;
			margin: 40px 0 30px 0;
		}

		.timebox {
			overflow: hidden;
			width: 100%;
			margin: 12px 0;

			ul {
				display: inline-block;
				float: left;

				li {
					display: inline-block;
					float: left;
					font-size: 14px;
					color: white;
					margin-right: 32px;
					line-height: 24px;

					&:first-child {
						width: 60px;
					}

					&.actived {
						button {
							color: #00c8f1;
						}
					}

					button {
						font-size: 14px;
						color: white;
						border: none;
						background-color: transparent;
						cursor: pointer;

						&:focus {
							outline: none;
						}

						&:hover {
							color: #00c8f1;
						}
					}
				}
			}

			.timeicon {
				float: right;
				font-size: 18px;
				width: 32px;
				height: 28px;
				line-height: 30px;
				border: 1px solid white;
				border-radius: 0 4px 4px 0;
				color: white;
			}

			.picktime {
				float: right;
				background-color: transparent;
				border-radius: 4px 0 0 4px;
				width: 280px;
				line-height: 30px;
				height: 30px;
				font-size: 12px;
				color: white;

				/deep/ .el-range-separator {
					line-height: 24px;
					color: white;
				}

				/deep/ .el-icon-date {
					display: none;
				}

				/deep/ .el-input__icon {
					line-height: 30px;
					height: 30px;
					color: white;
				}

				/deep/ .el-range-input {
					background-color: transparent;
					line-height: 30px;
					height: 30px;
					color: white;
				}

				/deep/ .el-input__inner {
					height: 30px !important;
					line-height: 30px !important;
					padding-left: 10px;
					background: transparent;
					color: white;
					font-size: 12px;
					border-radius: 4px 0 0 4px;
				}

				/deep/ .el-input__prefix {
					display: none;
				}

				/deep/ .el-input__icon {
					line-height: 30px;
				}
			}
		}

		.statistics {
			overflow: hidden;
			width: 100%;
			margin-bottom: 40px;

			li {
				display: inline-block;
				float: left;
				font-size: 14px;
				color: white;
				margin-right: 32px;
				line-height: 24px;

				&:first-child {
					width: 60px;
				}

				&.picks {
					button {
						color: #00c8f1;
					}
				}

				button {
					font-size: 14px;
					color: white;
					border: none;
					background-color: transparent;
					cursor: pointer;

					&:focus {
						outline: none;
					}

					&:hover {
						color: #00c8f1;
					}
				}
			}
		}
	}

	// 趋势图
	.region {
		overflow: hidden;
		position: relative;
		width: 100%;

		.detail {
			cursor: pointer;
			position: absolute;
			right: 20px;
			bottom: 30px;
			color: #4353da;
			font-size: 14px;

			&:hover {
				color: white;
			}
		}
	}

	// 当前省份
	.curentcity {
		margin-top: 20px;

		h2 {
			font-size: 18px;
			color: white;
			margin: 40px 0 30px 0;
		}
	}

	// 学校视角
	#schoolbox {
		margin-top: 40px;

		.vicetit {
			line-height: 50px;
			font-size: 16px;
			color: #fff;
			margin: 30px 0;
			border-bottom: 1px solid #7d7d7d;
		}

		ul {
			overflow: hidden;
			width: 100%;
			margin-bottom: 20px;

			li {
				display: inline-block;
				cursor: pointer;
				margin-right: 30px;
				font-size: 16px;
				color: #fff;
				font-weight: 600;

				&:hover {
					color: #4353da;
				}
			}

			.schoolpicked {
				color: #4353da;
			}
		}

		.menu {
			display: flex;
			justify-content: start;
			margin: 40px 0;

			.haveclasssta {
				/deep/ .el-input__inner {
					background-color: transparent;
					color: #fff;
				}
			}

			span {
				line-height: 40px;
				font-size: 14px;
				color: #fff;
				display: inline-block;
				margin-right: 15px;
			}

			.studysta {
				margin-left: 20px;
			}

			.exports {
				font-size: 14px;
				color: #1e29ad;
				cursor: pointer;

				&:hover {
					color: #fff;
				}
			}

			.inp {
				width: 200px;

				/deep/ .el-input__inner {
					color: #fff;
					background-color: transparent;
				}
			}

			.search {
				margin: 0 25px 0 30px;
				background-color: #1e29ad;
				border-color: #1e29ad;

				&:hover {
					background-color: #409eff;
					border-color: #409eff;
				}
			}

			.el-date-editor {
				/deep/ .el-input__prefix {
					display: none;
				}

				/deep/ .el-input__inner {
					background-color: transparent;
					color: #fff;
				}
			}
		}
	}

	// 城市概况
	.citybox {
		h2 {
			font-size: 18px;
			color: white;
			margin: 40px 0 30px 0;
		}
	}

	.cabin {
		padding: 10px 20px;
		background: #000;

		table {
			width: 100%;
			display: table;
			border-collapse: collapse;

			thead {
				border-bottom: 1px solid #313445;

				th {
					color: #fff;
					font-size: 14px;
					font-weight: 500;
					line-height: 60px;

					&:first-child {
						border-right: 1px solid #313445;
					}
				}
			}

			tbody {
				tr {
					td {
						&:first-child {
							border-right: 1px solid #313445;
						}
					}
				}

				td {
					font-size: 13px;
					color: #fff;
					text-align: center;
					line-height: 60px;

					&.detail {
						color: #2a36e0;
						cursor: pointer;

						&:hover {
							color: orangered;
						}
					}

					i {
						display: inline-block;
						width: 8px;
						height: 8px;
						border-radius: 50%;
						margin-right: 6px;
					}

					.t1 {
						background-color: #3c3694;
					}

					.t2 {
						background-color: #ca8c38;
					}

					.t3 {
						background-color: #8a58d1;
					}

					.t4 {
						background-color: #c5506f;
					}
				}
			}
		}
	}
}
</style>
